<template>
    <div class="goodlist">
        <div class="gooditem" v-for="item in goodList" :key="item.id" @click="runGoodInfo(item.id)">
            <img :src="item.img_url" alt="">
            <h4>{{item.title}}</h4>
            <div class="goodinfo">
                <p class="goodprice">
                    <span class="nowprice">￥{{item.sell_price}}</span>
                    <span class="oldprice">￥{{item.market_price}}</span>
                </p>
                <p class="goodsell">
                    <span>热卖中</span>
                    <span>剩{{item.stock_quantity}}件</span>
                </p>
            </div>
        </div>
        <mt-button type="danger" size="large" @click="getMore">加载更多</mt-button>
    </div>
</template>
<script>
export default {
    data(){
        return{
           goodList:[],
           pageIndex:1
        }
    },
    created(){
       this.getGoodList();
    },
    methods:{
        getMore(){
            this.pageIndex++;
            this.getGoodList();
        },
        getGoodList(){
            this.$http.get("api/getgoods?pageindex="+this.pageIndex).then((result)=>{
                if(result.body.status===0){
                    this.goodList=this.goodList.concat(result.body.message);
                }else{
                    alert("请求失败")
                }
            })
        },
        runGoodInfo(id){
            this.$router.push({
                path:"/home/goodinfo/"+id
            })
        }
    }
}
</script>
<style>
   .goodlist{
       display:flex;
       flex-wrap:wrap;
       justify-content: space-between;
       padding:5px;
   }
   .goodlist .gooditem{
       width:49%;
       box-shadow:0 0 5px;
       margin:5px 0px;
       padding:2px;
       min-height: 293px;
       display:flex;
       flex-direction: column;
       justify-content: space-between;
   }
   .goodlist .gooditem img{
       width:100%;
   }  
   .goodlist .gooditem h4{
       font-size:15px;
       font-weight:bold;
       text-align:center;
   }
   .goodlist .gooditem .goodinfo{
       background-color:#eee;
   }  
   .goodlist .gooditem .goodinfo p{
       display: flex;
   }
   .goodlist .gooditem .goodinfo p:nth-child(2){
       margin:0;
       padding-bottom:8px;
       display:flex;
       justify-content: space-between
   }
   .goodlist .gooditem .goodinfo .goodprice span:nth-child(1){
       color:red;
       font-size:18px;
       font-weight:bolder;
       padding:10px 10px 0px 10px;
   }
   .goodlist .gooditem .goodinfo .goodprice span:nth-child(2){
       padding:10px 0 0px 0px;
       text-decoration: line-through;
       
   }
   .goodlist .gooditem .goodinfo .goodsell span{
       padding:0 10px;
   }
</style>



